<template>
    <div id="app" >
        <div id="searchConditions">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-select v-model="t.schoolyear" placeholder="请选择学年" @change="changeExamin">
                        <el-option v-for="schoolyear in schoolyearOptions" :key="schoolyear.value" :value="schoolyear.value" :label="schoolyear.label"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="t.semesters" placeholder="请选择学期" @change="changeExamin">
                        <el-option v-for="semesters in semestersOptions" :key="semesters.value" :value="semesters.value" :label="semesters.label"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="t.grade" placeholder="请选择年级">
                        <el-option v-for="grade in gradeOptions" :key="grade.value" :value="grade.value" :label="grade.label"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="t.subject" placeholder="请选择科目">
                        <el-option v-for="subject in subjectOptions" :key="subject.value" :value="subject.value" :label="subject.label"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="t.examin" placeholder="请选择考试名称">
                        <el-option v-for="examin in examinOptions" :key="examin.value" :value="examin.value" :label="examin.label"></el-option>
                    </el-select>
                </el-col>
                </el-row>
	        <br>
            <el-row style="text-align: center;margin-top:20px;">
                <el-col :span="24" size="large">
                    <el-button @click="search" type="primary" size="large">查询</el-button>
                </el-col>
            </el-row>
        </div>
    </div>

</template>
<script>
import axios from 'axios'
export default {
  props: {
    schoolyearOptions: {
      type: Array,
      default: () => []
    },
    semestersOptions: {
      type: Array,
      default: () => []
    },
    gradeOptions: {
      type: Array,
      default: () => []
    },
    subjectOptions: {
      type: Array,
      default: () => []
    },
    examinOptions: {
      type: Array,
      default: () => []
    },
    t: {
      type: Object,
      default: {}
    }
  },
  name: 'SelectOptions',
  data() {
    return {

    }
  },
  computed: {
    address() {
      const {schoolyearOptions, semestersOptions, gradeOptions, subjectOptions, examinOptions, t} = this
        return {
        schoolyearOptions,
        semestersOptions,
        gradeOptions,
        subjectOptions,
        examinOptions,
        t
        }
      }

  },
  watch: {
    address: {
      handler(val, oldval) {
        console.log(val)
      }
    },
    deep:true
  },
  created: function() {
  },
  mounted: function() {
  },

  methods: {
    search: function() {
      this.$emit('search', this.t.schoolyear, this.t.semesters, this.t.grade, this.t.subject, this.t.examin)
    },
    changeExamin: function() {
      console.log("change event...")
      this.$emit('changeExamin', this.t.schoolyear, this.t.semesters)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app {
        margin: 50px;
    }
  #searchConditions{
        border:0px solid;
        padding:10px;
    }

</style>